<template>
  <el-dialog
    title="角色管理使用提示"
    :visible.sync="dialogVisible"
    width="700px"
    @close="handleClose"
  >
    <div class="usage-content">
      <h4>操作说明：</h4>
      <ul>
        <li><strong>增加角色：</strong>选择用户并分配角色，系统会自动为用户设置相应权限</li>
        <li><strong>编辑：</strong>可以修改用户的角色和状态</li>
        <li><strong>删除：</strong>删除用户的角色分配</li>
        <li><strong>批量删除：</strong>可以同时删除多个用户的角色分配</li>
        <li><strong>状态切换：</strong>启用/禁用用户的角色权限</li>
      </ul>
      
      <h4>角色权限说明：</h4>
      <div class="role-permissions">
        <div class="permission-item">
          <el-tag type="danger" size="small">超级管理员</el-tag>
          <span>拥有系统全部权限，包括员工管理、角色管理等所有功能</span>
        </div>
        <div class="permission-item">
          <el-tag type="warning" size="small">普通管理员</el-tag>
          <span>可以进入员工管理进行操作，但不能进入角色管理</span>
        </div>
        <div class="permission-item">
          <el-tag type="info" size="small">普通用户</el-tag>
          <span>除了员工管理和角色管理外，可以正常操作其他功能</span>
        </div>
      </div>
      
      <div class="tips">
        <el-alert
          title="温馨提示"
          type="info"
          description="请谨慎分配角色权限，确保系统安全。建议定期检查用户权限设置。"
          show-icon
          :closable="false">
        </el-alert>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirm">知道了</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'RoleUsageDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    handleConfirm() {
      this.$emit('update:visible', false)
      this.$emit('confirm')
    }
  }
}
</script>

<style scoped>
/* 使用提示对话框样式 */
.usage-content {
  line-height: 1.6;
}

.usage-content h4 {
  color: #303133;
  margin: 0 0 12px 0;
  font-size: 16px;
}

.usage-content ul {
  margin: 0 0 20px 0;
  padding-left: 20px;
}

.usage-content li {
  margin-bottom: 8px;
  color: #606266;
}

.role-permissions {
  margin-bottom: 20px;
}

.permission-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.permission-item span {
  color: #606266;
  font-size: 14px;
}

.tips {
  margin-top: 16px;
}

.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .permission-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>